<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .mask {
          /* 添加兼容型前缀 */
          -webkit-mask-image: url("/src/img/css3/star.png");
          /* 图片为上图提供的纯黑色的五角星,图片默认会水平垂直方向重复 */
          mask-image: url("/src/img/css3/star.png");
        }
      </style>

      <!-- 
        TIP

        mask-image 属性指定用作元素遮罩的图像或渐变。
        它可以接受以下三种值

        属性值	说明
        URL 值	通过url() 加载一张遮罩图像
        CSS 渐变	通过 CSS 线型渐变 、径向渐变、锥形渐变等绘制遮罩渐变图像
        none	取消遮罩效果

        TIP

        使用图像作为遮罩层
        图像不透明部分，元素完全显示
        透明部分则完全不显示
        半透明部分，呈半透明显示
      -->

      <img src="/src/img/css3/ms.jpg" class="mask" />
</body>
</html>